<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>道路交通安全研究信息共享平台</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="lib/ligerUI/skins/Wisoft/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
    <script type="text/javascript">
        var tab = null;
        var accordion = null;
        var tree = null;
        var treeData=[{
            caption:'菜单一'
            ,welcome:true
            ,children:[{
                caption:'菜单一1'
                ,children:[{
                    caption:'菜单一1.1'
                    ,url:'#'
                },{
                    caption:'菜单一1.2'
                    ,url:'#'
                }]
            },{
                caption:'菜单一2'
                ,url:'#'
            }]
        },{
            caption:'菜单二'
            ,children:[{
                caption:'菜单二1'
                ,children:[{
                    caption:'菜单二1.1'
                    ,url:'#'
                }]
            },{
                caption:'菜单二2'
                ,url:'#'
            }]
        }];
        $(function (){
            $("#layout1").ligerLayout({ leftWidth: 190, height: '100%',space:4, onHeightChanged: f_heightChanged });
            //Tab
            tab = $("#framecenter").ligerTab({
                height: $(".l-layout-center").height(),
                onAfterRemoveTabItem:function(){
                    var tabids=tab.getTabidList();
                    if(tabids.length && !tab.getSelectedTabItemID()){// 还存在tab页，且没有选中项，选中第一项
                        tab.selectTabItem(tab.getTabidList()[0]);
                    }
                }
            });
            accordion = $("#accordion1").ligerAccordion();
            $("#pageloading").hide();
            /*一级菜单*/
            var menuStr='',selMenu;
            for(var i=0;i<treeData.length;i++){
                var item=treeData[i];
                if(item.welcome){
                    selMenu=i;
                    menuStr+='<div class="menu_item">\
                        <li class="top" id="Selected"><a class="top_link">'+item.caption+'</a></li>\
                    </div>';
                }else{
                    menuStr+='<div class="menu_item">\
                        <li class="top"><a class="top_link">'+item.caption+'</a></li>\
                    </div>';
                }
            }
            $('#nav').html(menuStr);
            $('.menu_item').click(function(){
                var currMenu=$(this);
                if(currMenu.find('li').attr('id')=='Selected') return;
                $('#Selected').removeAttr('id');
                $(this).find('li').attr('id','Selected');
                gotoMenuPage($(this).index('.menu_item'));
            });
            /*面板*/
            gotoMenuPage(selMenu || 0);
        });
        function gotoMenuPage(index){
            setAccordion(index);
            tab && tab.removeAll();
        }
        function setAccordion(index){
            var _accordion=treeData[index].children;
            var accordionStr='';
            for(var i=0;i<_accordion.length;i++){
                var item=_accordion[i],children=item.children;
                accordionStr+='<div title="'+item.caption+'" class="l-scrolla">';
                if(children){
                    accordionStr+='<ul class="leftMenu">';
                    for(var j=0;j<children.length;j++){
                        var child=children[j];
                        accordionStr+='<li><a href="javascript:f_addTab(\'tab'+i+'_'+j+'\',\''+child.caption+'\',\''+(child.url||'http://www.baidu.com')+'\')"><div>'+child.caption+'</div></a></li>';
                    }
                    accordionStr+='</ul>';
                }
                accordionStr+='</div>';
            }
            //面板
            var accordionEl=$('#accordion1');
            accordionEl.off('click.accordion');
            accordionEl.html(accordionStr).removeAttr('ligeruiid');
            accordion = accordionEl.ligerAccordion({ height: $(".l-layout-center").height(), speed: null });
            accordionEl.on('click.accordion','.l-accordion-header-inner',function(e){
                var i=$(this).index('#accordion1 .l-accordion-header-inner');
                var curAccordion=_accordion[i];
                if(curAccordion.url){
                    f_addTab('tab'+i,curAccordion.caption,curAccordion.url);
                }
            });
        }
        function f_heightChanged(options){
            if (tab)
                tab.addHeight(options.diff);
            if (accordion && options.middleHeight > 0)
                accordion.setHeight(options.middleHeight);
        }
        function f_addTab(tabid,text, url){
            tab.addTabItem({ tabid : tabid,text: text, url: url });
        }
    </script>
    <style type="text/css">
        body,html{height:100%;_height:auto;_width:99.888%;}
        body{ padding:0; margin:0; overflow:hidden;}
        .headSkin{ background:url("images/headerbg.jpg") no-repeat #44b5df right; height:70px;}
        .l-topmenu-logo{
            background: url("images/headerlogo.jpg") no-repeat 10px center;
            height: 70px;
            width:459px;
        }
        .menu{background: #0d94c9}
        #nav li.top#Selected {
            background: #FFF;
            border-top: 3px solid #4BF3FC;
        }
        #nav li:hover a.top_link{background:none;}
        #accordion1{background: #eaeff5;}
        .l-layout-left, .l-layout-right, .l-layout-center, .l-layout-top, .l-layout-bottom{
            border:1px solid #dcdcdc;
        }
        .l-accordion-header {
            color: #fff;
            height: 34px;
            line-height: 33px;
            background: #44b5df;
            border-top:1px solid #dcdcdc;
        }
        .l-scrolla{ background:none;}
        .l-accordion-toggle {
            top: 7px;
            right: 7px;
            background-image: url('images/togglebar.gif');
        }
        .leftMenu{
            border-bottom:1px solid #dcdcdc;
        }
        .leftMenu li a {
            color:#666;
            background: #fdfdfd;
            border: solid 1px #dcdcdc;
            height: 29px;
            line-height: 28px;
            padding-left:10px;
        }
        .leftMenu img {
            width:16px;
            height:16px;
            margin-right:5px;
            vertical-align: middle;;
        }
        .l-tab-links {
            background: url('images/tabs-bg.gif') repeat-x;
            border-bottom: 1px solid #dcdcdc;
         }
        .l-tab-links li{background:url("images/tabs-item-bg.gif");}
        .l-tab-links li.l-selected{background:url("images/tabs-item-over-bg.gif");}
        .l-tab-links-item-left{ background:url("images/tabs-item-left-bg.gif")}
        .l-tab-links-item-right{ background:url("images/tabs-item-right-bg.gif")}
        .l-tab-links-item-close{ background:url("images/icon-close.gif");}
        .l-tab-links-item-close-over{ background:url("images/icon-close-over.gif");}
        .l-layout-bottom{ background:#44b6df;}
    </style>
</head>
<body>
<div id="pageloading"></div>
<div id="topmenu" class="headSkin">
    <div class="l-topmenu-logo"></div>
    <div class="l-topmenu-welcome">
        <a href="index_liger.htm" class="l-link2">ligerUI Demos</a>
        <span class="space">|</span>
        <a href="index_A.htm" class="l-link2" target="_blank">集成管理</a>
        <span class="space">|</span>
        <a href="index_B.htm" class="l-link2" target="_blank">接处警</a>
        <span class="space">|</span>
        <a href="index_C.htm" class="l-link2" target="_blank">设施与设备</a>
    </div>
</div>
<div class="menu">
    <div class="menubar">
        <ul id="nav"></ul>
    </div>
</div>
<div id="layout1">
    <div position="left" id="accordion1"></div>
    <div position="center" id="framecenter"></div>
</div>
<div style="display:none"></div>
</body>
</html>
